<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <script src="../../../../libs/layui/layui.js"></script>
        <link rel="stylesheet" href="../../../../libs/layui/css/layui.css" />
        <title>Layui - 数据表格动态转换 (v2.6.8)</title>
    </head>
    <body style="padding: 15px;">
        <table lay-filter="demo">
            <thead>
                <tr>
                    <th lay-data="{field:'username', width:100}">昵称</th>
                    <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
                    <th lay-data="{field:'sign'}">签名</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>贤心1</td>
                    <td>66</td>
                    <td>人生就像是一场修行a</td>
                </tr>
                <tr>
                    <td>贤心2</td>
                    <td>88</td>
                    <td>人生就像是一场修行b</td>
                </tr>
                <tr>
                    <td>贤心3</td>
                    <td>33</td>
                    <td>人生就像是一场修行c</td>
                </tr>
            </tbody>
        </table>

        <div class="layui-btn" id="formatTable">转换上述表格</div>

        <script type="text/javascript">
            layui.use(['table', 'jquery', 'layer'], function () {
                var table = layui.table;
                var $ = layui.$;
                var layer = layui.layer;
                var isFormat = false;

                $('#formatTable').click(function () {
                    if (isFormat) {
                        layer.msg('已经转换过了哟~');
                    } else {
                        //转换静态表格
                        table.init('demo', {
                            height: 200, //设置高度
                            limit: 10, //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                            //支持所有基础参数
                            page: true
                        });
                        isFormat = true;
                    }
                });
            });
        </script>
    </body>
</html>
